<template>
  <div class="cms-detail-box">
    <div>
      <el-row class="main-box">
        <div :span="24">
          <el-tabs @tab-click="selectTab" :value="tabIndex">
            <el-tab-pane label="基本信息">
              <div class="m-b-20">
                <BasicInfo ref="basicInfo" @changeInfo="changeInfo" @saveSuccess="saveSuccess"></BasicInfo>
              </div>
            </el-tab-pane>
            <el-tab-pane label="标的企业财务" :disabled="$route.params.eventId==='-1'">
              <div v-if="tabIndex==1" class="m-b-20">
                <EnterpriseFinance></EnterpriseFinance> 
              </div>
            </el-tab-pane>
            <el-tab-pane label="投资方" :disabled="$route.params.eventId==='-1'">
              <div v-if="tabIndex==2" class="m-b-20">
                <Investor></Investor>
              </div>
            </el-tab-pane>
            <el-tab-pane label="退出方" :disabled="$route.params.eventId==='-1'">
              <div v-if="tabIndex==3" class="m-b-20">
                <Quitor></Quitor>
              </div>
            </el-tab-pane>
            <el-tab-pane label="三方中介" :disabled="$route.params.eventId==='-1'">
              <div v-if="tabIndex==4" class="m-b-20">
                <ThreePartyIntermediaries :type="2"></ThreePartyIntermediaries>
              </div>
            </el-tab-pane>
            <el-tab-pane label="IPO资金监管" :disabled="$route.params.eventId==='-1'">
              <div v-if="tabIndex==5" class="m-b-20">
                <IpoBank></IpoBank>
              </div>
            </el-tab-pane>
          </el-tabs>
          <div class="right-btn">
            <DetailStateBtn :infoStatus="infoStatus" @setState="setState" class="left-btn"></DetailStateBtn>
            <el-button type="primary" @click="close">关闭</el-button>
          </div>
        </div>
      </el-row>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
// import { Component, Watch } from 'vue-property-decorator';
import { Component } from 'vue-property-decorator';
import BasicInfo from './tabs/basic-info.vue';
import EnterpriseFinance from './tabs/enterprise-finance.vue';
import ThreePartyIntermediaries from '@/components/event/three-party-intermediaries/index.vue';
import IpoBank from './tabs/IPO.vue';
import Investor from '@/components/event/investor/index.vue';
import Quitor from '@/components/event/quitor/index.vue';
import { StateMessage } from '../../../service/common/interface';
import DetailStateBtn from '../../../components/detail-state-btn/index.vue';

@Component({
  components: {
    BasicInfo, // 基本信息组建
    EnterpriseFinance, // 标的企业财务
    IpoBank, // IPO
    Investor, // 投资方组件
    Quitor, // 退出方组件
    ThreePartyIntermediaries, // 三方中介
    DetailStateBtn, // 信息状态
  }
})
export default class NewIssue extends Vue {
  // 初始化数据 相当于data
  public tabIndex: string = '0';
  public infoStatus: string = '0000';
  public stateBak: string = '0000';
  public eventId: string = '-1';
  // refs
  public $refs: { 
    basicInfo: HTMLFormElement;
  };

  // 生命周期钩子
  // public mounted() {
  // }

  // 按钮
  public setState(state: StateMessage) {
      this.$refs.basicInfo.save(state);
      this.stateBak = state.infoStatus;
  }
  // 修改信息状态
  public saveSuccess(val: boolean) {
    if (val) {
      this.infoStatus = this.stateBak;
    }
  }
  // 信息状态回显
  public changeInfo(state: string) {
      this.infoStatus = state;
  }
  // 关闭-跳转到列表页
  public close() {
      this.$router.push({ name: 'new-issue-list' });
  }
  // tab切换
  public selectTab(tab: {index: string}) {
      this.tabIndex = tab.index;
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .noPass {
    color: #f00;
  }
  .w-100 {
    width: 100%;
  }
  .w-85 {
    width: 85%;
  }
  .w-80 {
    width: 80%;
  }
  .w-55 {
    width: 55%;
  }
  .align-center-self {
    text-align: center;
    line-height: 40px;
  }
  .main-box {
    position: relative;
  }
  .main-box .right-btn{
    position: absolute;
    right: 30px;
    top: 10px;
  }
  .right-btn .left-btn {
    display: inline-block;
    margin-right: 5px;
  }
</style>
